<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="referrer" content="no-referrer">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/element-ui@2.15.4.css">
  <script src="./lib/vue.min.2.7.14.js"></script>
  <script src="./lib/element-ui@2.15.14.js"></script>
  <script src="./lib/echarts.min.5.0.2.js"></script>
  <script src="./lib/axios.min.js"></script>


  <style>
    .active {
      color: #3561FD;
    }
  </style>
</head>

<body>
  <div id="app">
    <my-chart></my-chart>

  </div>
  <script>
    const getMapJson = async (mapName) => {
      const url = `https://geo.datav.aliyun.com/areas_v3/bound/${mapName}.json`
      const mapJson = await axios(url).then(res => res.json())
      return mapJson
    }


    Vue.component('empty', {
      template:
        `<div>
               empty
          </div>
            `,
      data() {
        return {
        }
      },
      methods: {
        async getDate(type) {
          const r = await axios.request({
            method: 'get',
            url: ' http://localhost:1237/' + type
          })
          this.PieDataList[type] = r.data
        },
      },
      beforeCreate() {
        this.myChart = null
      },
      watch: {

      },


      async mounted() {
      },
      beforeDestory() { }

    })
    Vue.component('my-chart', {
      template:
        `<div>
          <el-button @click="mapBack">地图回退</el-button>
           <div style="width: 100%;height: 600px;border:1px solid red;" ref="mapBoxRef"></div></div>
        </div>
            `,
      data() {
        return {
          huBeiAdcode: '420000_province',
          mapList: ['420000_province']// 记录点击的省市县adcode值和层级
        }
      },
      methods: {
        /*
        adcode 城市编码
        湖北省 420000
        level城市层级 省市县
        */
        async getMapJson(adcode, level) {
          const r = await axios.request({
            method: 'get',
            url: `https://geo.datav.aliyun.com/areas_v3/bound/${adcode}${level !== 'district' ? '_full' : ''}.json`
          })
          return r.data
        },
        async renderMapEcharts(adcode, level) {
          const mapJsonData = await this.getMapJson(adcode, level)
          echarts.registerMap(adcode, mapJsonData);
          const mapdata = mapJsonData.features.map((item) => {
            const data = Math.ceil((Math.random() * 80 + 20))// 20-80随机数
            const tempValue = item.properties.center ? [...item.properties.center, data] : item.properties.center
            return {
              name: item.properties.name,
              value: tempValue, // 中心点经纬度
              adcode: item.properties.adcode, // 区域编码
              level: item.properties.level, // 层级
              data // 模拟数据
            }
          });
          const options = this.getOptions(adcode, mapdata)
          this.myChart.clear()
          this.myChart.setOption(options)
        },

        getOptions(adcode, mapData) {
          return {
            tooltip: {
              show: true,
              formatter: function (params) {
                // 根据需要进行数据处理或格式化操作
                if (params && params.data) {
                  const { adcode, name, data } = params.data;
                  // 返回自定义的tooltip内容
                  return `adcode: ${adcode}<br>name: ${name}<br>data: ${data}`;
                }
              },
            },
            visualMap: {
              show: false,
              min: 0,
              max: 100,
              left: 'left',
              top: 'bottom',
              text: ['高', '低'], // 文本，默认为数值文本
              calculable: true,
              seriesIndex: [0],
              inRange: {
                color: ['#00467F', '#A5CC82'] // 蓝绿
              }
            },
            geo: {
              map: adcode,
              roam: true,
              select: false,
              zoom: 1.2,
              // layoutCenter: ['45%', '70%'],
              selectedMode: 'single',
              label: {
                show: true
              },
              emphasis: {
                itemStyle: {
                  areaColor: '#389BB7',
                  borderColor: '#389BB7',
                  borderWidth: 0
                },
                label: {
                  fontSize: 14,
                },
              }
            },
            series: [
              // 数据
              {
                type: 'map',
                map: adcode,
                roam: true,
                geoIndex: 0,
                select: false,
                data: mapData
              },
              {
                name: '散点',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: mapData,
                itemStyle: {
                  color: '#05C3F9'
                }
              },
              {
                name: '点', //定位气泡
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin', //气泡
                symbolSize: function (val) {
                  if (val) {
                    return val[2] / 4 + 20;
                  }
                },
                label: { //气泡上的文字
                  show: true,
                  formatter: function (params) {
                    return params.data.data || 0;
                  },
                  color: '#fff',
                  fontSize: 9,
                },
                itemStyle: {
                  color: '#F62157', //标志颜色
                },
                zlevel: 6,
                data: mapData,
              },
              {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: mapData.map((item) => {
                  if (item.data > 60) return item
                }),
                symbolSize: 15,
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke'
                },
                label: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                },
                itemStyle: {
                  color: 'yellow',
                  shadowBlur: 10,
                  shadowColor: 'yellow'
                },
                zlevel: 1
              },
            ]
          }
        },
        mapBack() {
          console.log(this.mapList);
          const temp = this.mapList[this.mapList.length - 2] //当前展示地图adcode是mapList最后一项，上一层级就是mapList的倒数第二项
          if (!temp) return
          this.mapList.pop()   //既然回退了就要把mapList的最后一项给删掉
          const [adcode, level] = temp.split('_')
          this.renderMapEcharts(adcode, level)

        }
      },

      beforeCreate() {
        this.myChart = null
      },
      async mounted() {
        this.myChart = echarts.init(this.$refs.mapBoxRef);
        const [adcode, level] = this.huBeiAdcode.split('_')
        this.renderMapEcharts(adcode, level)
        this.myChart.on('click', (params) => {
          console.log('params', params)
          const { seriesType } = params
          if (seriesType !== 'map') return  //只有点击了地图才触发下钻

          console.log('params.data', params.data)
          const { adcode, data, level, name, value } = params.data
          if (this.mapList[this.mapList.length - 1] === `${adcode}_${level}`) {
            return this.$message.warning('已经是地图最下层了')
          }
          this.mapList.push(`${adcode}_${level}`)
          this.renderMapEcharts(adcode, level) //拿到新的城市编码code调用renderMapEcharts重新绘制地图

        })
      },
      beforeDestory() {
      }

    })

    new Vue({
      el: '#app',
      data: function () {
        return {


        }
      },


    })
  </script>

</body>

</html>